import {layer} from "@layui/layui-vue";
import {computed, ComputedRef, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {diff} from "@/utils/array";
import {getParents, getNode} from "@/utils/tree";
import {useAppStore} from "@/store/modules/app";
import {useUserStore} from "@/store/modules/user";
import Config from "@/config";

export function useMenu() {

    const route = useRoute();
    const router = useRouter();
    const userStore = useUserStore();
    const appStore = useAppStore();
    const selectedKey = ref(route.path);
    const openKeys = ref<string[]>([]);
    const isAccordion = computed(() => appStore.accordion);
    const mainSelectedKey = ref(Config.mainUrl);

    const menuAll = computed(() => {
        return userStore.menus;
    });

    const mainMenus: ComputedRef<any[]> = computed(() => {
        return [];
    });

    watch(
        route,
        () => {
            selectedKey.value = route.path;
            const andParents = getParents(menuAll.value, route.path);
            if (andParents && andParents.length > 0) {
                let andParentKeys = andParents.map((item: any) => item.id);
                if (isAccordion.value) {
                    openKeys.value = [...andParentKeys];
                } else {
                    openKeys.value = [...andParentKeys, ...openKeys.value];
                }
            }
        },
        {immediate: true}
    );

    const to = (id: string, query?: any) => {
        router.push({path: id, query: query});
    };

    function changeSelectedKey(key: string) {
        const node = getNode(userStore.menus, key);
        const query: any = {};
        if (node.type && node.type == "modal") {
            layer.open({
                type: "iframe",
                content: node.id,
                area: ["80%", "80%"],
                maxmin: true,
            });
            return;
        }

        if (node.type && node.type == "link") {
            query.link = node.url
            query.title = node.title
            window.open(node.url, "_blank");
        }
        if (node.type && node.type == "iframe") {
            query.link = node.url
            query.title = node.title
        }
        to(key, query);
    }

    function changeOpenKeys(keys: string[]) {
        const addArr = diff(openKeys.value, keys);
        if (keys.length > openKeys.value.length && isAccordion.value) {
            var arr = getParents(menuAll.value, addArr[0]);
            if (arr && arr.length > 0) {
                openKeys.value = arr.map((item: any) => {
                    return item.id;
                });
            }
        } else {
            openKeys.value = keys;
        }
    }

    function changeMainSelectedKey(key: string) {

        const node = getNode(userStore.menus, key);

        if (node.type && node.type == "modal") {
            layer.open({
                type: "iframe",
                content: node.id,
                area: ["80%", "80%"],
                maxmin: true,
            });
            return;
        }

        if (node.type && node.type == "blank") {
            window.open(node.id, "_blank");
            return;
        }

        mainSelectedKey.value = key;
    }

    return {
        selectedKey,
        openKeys,
        changeOpenKeys,
        changeSelectedKey,
        isAccordion,
        menuAll,
        mainMenus,
        mainSelectedKey,
        changeMainSelectedKey
    };
}
